<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<title>关于</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">
        .aui-bar-dark {
            background-color: #e65a65;
        }
        #cdRom{
            text-align: center;
            padding:50px;
        }
        #cdRom img{
            width:200px;
            height: 200px;
            border-radius: 100%;
        }
        #range2{
           width:90%;
           margin: 0 auto;
        }
        .btns{
           width:60%;
           margin: 0 auto;

        }
        
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-dark">
        <a class="aui-pull-left" onclick="goback();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </a>
        <div class="aui-title" id='header-title'></div>
    </header>
    <div id="cdRom">
        <img src="../image/cd.jpg">
    </div>
    <div class="aui-content" >
        

        <div class="aui-range"  >
            <input type="range" value="1" max="100" min="1" step="1" id="range2" />
        </div><br><br>
        <button class="aui-btn aui-btn-info aui-btn-block btns" onclick="fnStart()">播放</button><br>
        <button class="aui-btn aui-btn-warning aui-btn-block btns" onclick="fnPause()">暂停</button>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui.js"></script>
<script type="text/javascript" src="../script/aui-range.js" ></script>
<script type="text/javascript" src="../script/jQuery.js" ></script>
<script type="text/javascript" src="../script/jQueryRotate.js" ></script>
<script type="text/javascript">
    $aui.range($api.byId("range2"),function(ret){
        $api.text($api.byId("value-2"),ret);
    })
    var demo = $api.domAll(".demo");
    for(var i=0,len=demo.length;i<len;i++){
        demo[i].addEventListener("change",function(){
            $api.text($api.byId("value"),this.value);
        });
    }
    var angle=0;
    var dt=null;
    function cdRotate(){
        if(dt!=null){
            clearInterval(dt);
        }
        dt=setInterval(function(){
            angle+=3;
            $('#cdRom img').rotate(angle);
        },50);
    }
    function fnStart(){
        var netAudio=api.require('netAudio');
        netAudio.play({
            path:'http://www.snk147.cn/WeChat/mp3/xiaobaobei.mp3'
        },function(ret,err){
            var jindu=$api.byId('range2').value=ret.current/ret.duration*100;
            if(jindu==100){
                clearInterval(dt); 
            }
        });
        cdRotate();
    }
    apiready = function(){
        $api.byId('header-title').innerHTML=api.pageParam.name;
        fnStart();
        $aui.range($api.byId("range2"),function(ret){
            var netAudio=api.require('netAudio');
            netAudio.setProgress({
                progress:ret
            });
        });
    }

    function goback(){
        api.closeWin({
            name:'musicPlay'
        });
    }

    function fnPause(){
        var netAudio=api.require('netAudio');
        netAudio.pause();
        clearInterval(dt);
    }
</script>
</html>